<template>
    <div class="hello">
        <data-grid
                :isExport="isExport"
                :tabColumn="tabColumn"
                :tabData="tabData"
                v-bind="pageAttributes"
        >
            <template #batch-operation>

                <el-button @click="handleOpen('',{},'add')">新增</el-button>

            </template>
            <template #extend-column>
                <el-table-column label="操作" width="180">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleOpen(scope.$index, scope.row,'add')">编辑
                        </el-button>
                        <el-button size="mini" type="danger" @click="handleOpen(scope.$index, scope.row,'detail')">详情
                        </el-button>
                    </template>
                </el-table-column>
            </template>
        </data-grid>
        <!--<data-grid
                :isExport="isExport"
                :tabColumn="tabColumn"
                :tabData="tabData"
                :tabAttributes="tabAttributes"
                :pageAttributes="pageAttributes"
                @handleSelectionChange="handleSelectionChange"
                @handleSizeChange="handleSizeChange"
                @handleCurrentChange="handleCurrentChange"
        >
            <template #batch-operation>

                <el-button @click="handleOpen('',{},'add')">新增</el-button>

            </template>
            <template #extend-column>
                <el-table-column label="操作" width="180">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleOpen(scope.$index, scope.row,'add')">编辑
                        </el-button>
                        <el-button size="mini" type="danger" @click="handleOpen(scope.$index, scope.row,'detail')">详情
                        </el-button>
                    </template>
                </el-table-column>
            </template>
        </data-grid>-->
        <single-data-operation
                :dialogAttributes="dialogAttributes"
                :dialogType="dialogType"
                :dialogVisible="dialogVisible"
                :formFields="formFields"
                :dataDetail="dataDetail"
                :formRules="formRules"
                @handleColos="handleColos"
                @handleSubmit="handleSubmit"
        />
    </div>
</template>

<script>

    export default {
        name: 'HelloWorld',
        data() {
            return {
                isExport: {
                    export: {
                        icon: 'el-icon-download'
                    },
                    import: {
                        icon: 'el-icon-upload2'
                    },
                    template: {
                        icon: 'el-icon-s-unfold'
                    }
                },
                //table属性
                tabAttributes: {
                    heightSubtract: 300,//table高度自适应，计算其他组件高度
                    /*isSelection: true,//是否多选
                    isStripe: true,//是否斑马线
                    headerRowClassName: 'm-header-row-style',//头部行样式
                    headerCellClassName: 'm-header-cell-style',//头部列样式
                    rowClassName: 'm-row-style',//table行样式
                    cellClassName: 'm-cell-style'//table列样式
                    */
                },
                //显示的列
                tabColumn: [
                    {prop: "date", label: "日期", width: "180"},
                    {prop: "name", label: "姓名", width: "180"},
                    {prop: "gender", label: "性别", width: "180"},
                    {prop: "address", label: "地址"},
                ],
                //table数据
                tabData: [
                    {
                        date: '2016-05-02',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄',
                        gender: '男'
                    }, {
                        date: '2016-05-04',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1517 弄'
                    }, {
                        date: '2016-05-01',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1519 弄'
                    }, {
                        date: '2016-05-03',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1516 弄'
                    }, {
                        date: '2016-05-02',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄',
                        gender: '男'
                    }, {
                        date: '2016-05-04',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1517 弄'
                    }, {
                        date: '2016-05-01',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1519 弄'
                    }, {
                        date: '2016-05-03',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1516 弄'
                    }, {
                        date: '2016-05-02',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄',
                        gender: '男'
                    }, {
                        date: '2016-05-04',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1517 弄'
                    }, {
                        date: '2016-05-01',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1519 弄'
                    }, {
                        date: '2016-05-03',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1516 弄'
                    }, {
                        date: '2016-05-02',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄',
                        gender: '男'
                    }, {
                        date: '2016-05-04',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1517 弄'
                    }, {
                        date: '2016-05-01',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1519 弄'
                    }, {
                        date: '2016-05-03',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1516 弄'
                    }],
                //分页属性
                pageAttributes: {
                    pageNum: 1,
                    pageSize: 16,
                    total: 50,
                    pageSizes: [10, 20, 50],
                    pageClass: 'page-test'
                },

                //------------单数据操作
                //弹出框属性
                dialogAttributes: {
                    title: '单数据操作',
                    width: '50vw'
                },
                //是否显示
                dialogVisible: false,
                //弹出框类型  detail = 详情    add = 新增/修改
                dialogType: 'add',// detail or add
                //表单字段
                formFields: [
                    {label: '姓名', field: 'name', type: 'input'},
                    {label: '性别', field: 'gender', type: 'select'},
                    {label: '日期', field: 'date', type: 'dateTime'},
                    {label: '住址', field: 'address', type: 'input'}
                ],
                //表单验证规则
                formRules: {
                    name: [{required: true, message: '请输入活动名称', trigger: 'blur'}],
                    gender: [{required: true, message: '请选择性别', trigger: 'change'}],
                    date: [{required: true, message: '请选择日期', trigger: 'change'}],
                    address: [{required: true, message: '请输入地址', trigger: 'blur'}]
                },
                //数据详情
                dataDetail: {},

            }
        },
        components: {},
        props: {
            msg: String
        },
        /* 方法 */
        methods: {
            handleOpen(index, row, type) {
                this.dialogType = type
                this.dataDetail = row
                this.dialogVisible = !this.dialogVisible
            },
            handleColos() {
                this.dialogVisible = !this.dialogVisible
            },
            handleSubmit(item) {
                console.log(JSON.stringify(item))
            },
            //分页大小的函数
            handleSizeChange(val) {
                this.$message({
                    message: val,
                    type: 'success'
                });
            },
            //分页页码的函数
            handleCurrentChange(val) {
                this.$message({
                    message: val,
                    type: 'success'
                });
            },
            //多选时触发
            handleSelectionChange(val) {
                this.$message({
                    message: val,
                    type: 'success'
                });
            }
        },

    }
</script>

<style>
    .hello {
        padding: 20px;
    }

    /*.page-test {
        text-align: right;
        padding: 15px !important;
    }

    .m-header-row-style {
        height: 36px !important;
        color: #959aaa !important;
    }

    .m-header-cell-style {
        padding: 0 8px !important;
        background-color: #eff2f7 !important;
        color: #334266 !important;
    }

    .m-row-style {
        height: 36px !important;
    }

    .m-cell-style {
        padding: 0 8px !important;
    }*/
</style>
